import React,{useState} from 'react';

import {
    Container,
    Button,
    Checkbox,
    Radio,
    Input,
    FormLabel,
    Switch,
    Range,
    Counter,
    Datepicker,
    Message,
    Select,
    SelectOption,
    Textarea,
    CountDown,
    HeaderBar,
    Grid,
    GridItem,
    Pagination,
    Loading,
    Collapse,
    CollapseTitle,
    CollapseContent,
    Divider,
    Avatar,Popup,Uploader,Image,ImageViewer,List,ListTitle,ListLabel,ListContent,Spacing
} from './wave/packages';
import {CloseBold,CloseFill,LoadingLine,AddSimple} from "./wave/icons";
import countDown from "./wave/packages/count-down";

const ICONS=require('./wave/icons') as any;
console.log(ICONS)

function App(){
    function changeRadioValue(checked?:boolean,value?:number|string){
        console.log(checked,value,'radio')
    }
    function changeCheckBoxValue(checked?:boolean,value?:number|string){
        console.log(checked,value)
    }
    let valueCheckbox=10;

    function inputChange(value:string|number){
        console.log(value);
    }

    function rangeChange(percent:number){
        console.log(percent)
    }

    function counterChange(num:number|string){
        console.log(num,typeof num);
        console.log(Counter)
    }

    function switchChange(status:boolean){
        console.log(status);
    }

    setTimeout(function(){
        // Message.loading();
        // setTimeout(function(){
        //     Message.close();
        // },1000);
        // Message.notice({
        //     text:'露从今夜白',
        //     type:'message',
        //     time:2000
        // });
        // Message.notice({
        //     text:'露从今夜白',
        //     type:'warning',
        //     time:2000
        // });
        // Message.notice({
        //     text:'露从今夜白',
        //     type:'error',
        //     time:2000
        // });
        // Message.notice({
        //     text:'露从今夜白',
        //     type:'success',
        //     time:2000
        // });
        // Message.alert('');
        // Message.warning('');
        // Message.confirm({
        //     title:'标题',
        //     text:'内容内容内容内容内容内容',
        //     ensure:()=>{
        //         alert(2)
        //     },
        //     cancel:()=>{
        //         alert(1)
        //     }
        // });
    },1000);

    /*setTimeout(function(){
        ImageViewer.showImage('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F03%2F65%2F86%2F5be118297fb8b_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650685339&t=2f21cc14368097baef49283411ad7fd6')
        setTimeout(function(){
            ImageViewer.close()
        },1000);
    },1000);*/

    function changeDate(date:string){
        console.log(date);
    }

    function selectChange(value:string|number){
        console.log(value);
    }

    function headerBarClick(){
        alert(1)
    }

    function changePage(page:number,type:string){
        console.log(page,type)
    }

    let [popupVisible,setVisible]=useState(false);

    function countDownChange(time:number){
        console.log(time)
    }
    function countDownFinish(time:number){
        console.log(time)
    }

    const avatarUrl=require('./assets/avatar.jpg');
    const picUrl1=require('./assets/pic1.jpg');
    const picUrl2=require('./assets/pic3.jpg');

    return (
        <Container>
            <Spacing height="40px"/>
            <FormLabel>list列表</FormLabel>
            <List image={picUrl1}>
                <ListTitle>标题标题标题</ListTitle>
                <ListLabel>标签内容标签内容标签内容标签内容</ListLabel>
                <ListContent>列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容</ListContent>
            </List>
            <List image={picUrl1}>
                <ListTitle>标题标题标题</ListTitle>
                <ListLabel>标签内容标签内容标签内容标签内容</ListLabel>
                <ListContent>列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容</ListContent>
            </List>
            <List direction="vertical" image={picUrl2}>
                <ListTitle>标题标题标题</ListTitle>
                <ListLabel>标签内容标签内容标签内容标签内容</ListLabel>
                <ListContent>列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容</ListContent>
            </List>
            <List direction="vertical" image={picUrl2}>
                <ListTitle>标题标题标题</ListTitle>
                <ListLabel>标签内容标签内容标签内容标签内容</ListLabel>
                <ListContent>列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容</ListContent>
            </List>
            <FormLabel>图片</FormLabel>
            <Image src=""/>
            <FormLabel>文件上传</FormLabel>
            <Grid>
                <GridItem><Uploader action="#"/></GridItem>
                <GridItem><Uploader limit="0.01"/></GridItem>
                <GridItem><Uploader status='upload'/></GridItem>
                <GridItem><Uploader status='error'/></GridItem>
            </Grid>
            <FormLabel>popup弹窗</FormLabel>
            <Button onClick={()=>{
                setVisible(true);
            }}>显示popup</Button>
            <Popup onBackClick={()=>{setVisible(false);}} visible={popupVisible} position="left">
                <div onClick={()=>{alert('你点击了一下！')}}>点我！</div>
            </Popup>
            <FormLabel>icon图标</FormLabel>
            {
                Object.keys(ICONS).map((item)=>{
                    const Item=ICONS[item];
                    return (
                        <Item key={item}/>
                    )
                })
            }
            <hr/>
            <Grid center>
                <GridItem col="8"><Avatar img={avatarUrl}/></GridItem>
                <GridItem col="8"><Avatar/></GridItem>
                <GridItem col="8"><Avatar type="square"/></GridItem>
            </Grid>
            <hr/>
            <Divider/>
            <Divider text="这是分割线"/>
            <Divider text="这是分割线" borderStyle="dashed"/>
            <Divider text="这是分割线" color="#f00"  borderColor="#f00" borderStyle="dotted"/>
            <Collapse>
                <CollapseTitle>标题</CollapseTitle>
                <CollapseContent>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</CollapseContent>
            </Collapse>
            <Collapse>
                <CollapseTitle>标题</CollapseTitle>
                <CollapseContent>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</CollapseContent>
            </Collapse>
            <Loading color="red" text="加载中..."/>
            <Loading text="加载中..." textPosition="right"/>
            <Loading icon={LoadingLine}/>
            <Pagination onChange={changePage} totalCount={100} currentPage={1} size={10} visiblePage={5}/>
            <Pagination onChange={changePage} type="danger" totalCount={100} currentPage={4} size={10} visiblePage={5}/>
            <Pagination type="success" totalCount={100} currentPage={1} size={10} visiblePage={5} prevText="prev" nextText="next"/>
            <Grid>
                <GridItem col="8">1</GridItem>
                <GridItem col="10">1</GridItem>
                <GridItem col="6">1</GridItem>
            </Grid>
            <HeaderBar text="返回" title="页面标题" onClick={headerBarClick} type="primary"/>
            <FormLabel>计时器</FormLabel>
            <CountDown plain targetDate="2022-03-26 22:01" onChange={countDownChange} onFinish={countDownFinish}/>
            <CountDown type="success" targetDate="2022-04-01" format="HH-MM-SS"/>
            <CountDown type="warning" targetDate="2023-03-24" format="DD天HH时MM分SS秒"/>
            <CountDown type="primary" plain targetDate="2023-03-24" autoStart format="DD天HH小时MM分SS秒"/>
            {/*<CountDown type="warning"/>
            <CountDown type="primary"/>
            <CountDown type="danger"/>
            <CountDown type="info"/>
            <CountDown type="success" plain/>
            <CountDown type="warning" plain/>
            <CountDown type="primary" plain/>
            <CountDown type="danger" plain/>
            <CountDown type="info" plain/>*/}
            <FormLabel>文本框textarea</FormLabel>
            <Textarea size="large" value={123123} onChange={inputChange}/>
            <Textarea value="sdfsdfsd"/>
            <Textarea size="small" placeholder="请输入内容"/>
            <Textarea size="mini"/>
            <FormLabel>select选择器</FormLabel>
            <Select onChange={selectChange} value={2} placeholder="请选择">
                <SelectOption value="1">选项1</SelectOption>
                <SelectOption value="2">选项2</SelectOption>
                <SelectOption value="3">选项3</SelectOption>
                <SelectOption value="4">选项4</SelectOption>
                <SelectOption value="5">选项5</SelectOption>
                <SelectOption value="6">选项6</SelectOption>
            </Select>
            <FormLabel>日历</FormLabel>
            <Datepicker size="default" value="2021-07-02" onChange={changeDate} placeholder="请选择日期"/>
            <FormLabel>计数器</FormLabel>
            <Counter onChange={counterChange} number={1} min={0} max={5} step={1}/>
            <Counter onChange={counterChange} number={1} min={0} max={2} step={0.2}/>
            <Counter onChange={counterChange} number={1} step={0.2}/>
            <hr/>
            <FormLabel>控制器</FormLabel>
            <Range icon={CloseFill}/>
            <Range onChange={rangeChange} init={30} color="#f00"/>
            <hr/>
            <FormLabel>开关</FormLabel>
            <Switch size="large" onChange={switchChange} open/>
            <Switch color="red"/>
            <Switch size="small" color="green"/>
            <Switch size="mini" color="skyblue"/>
            <hr/>
            <Container>
                <Button type="default" size="large" icon={CloseBold}>按钮</Button>
                <Button type="primary" size="normal" icon={CloseFill}>按钮</Button>
                <Button type="primary" size="normal" disabled>按钮</Button>
                <Button type="success" size="small" icon={CloseFill}>按钮</Button>
                <Button type="info" size="mini" icon={AddSimple}>按钮</Button>
                <Button type="danger" size="mini">按钮</Button>
                <Button type="warning" size="mini">按钮</Button>
                <Button type="warning" size="large" block>按钮</Button>
                <Button type="default" size="large" icon={CloseBold} plain>按钮</Button>
                <Button type="primary" size="normal" icon={CloseFill} plain>按钮</Button>
                <Button type="primary" size="normal" disabled plain>按钮</Button>
                <Button type="success" size="small" icon={CloseFill} plain>按钮</Button>
                <Button type="info" size="mini" icon={CloseFill} plain>按钮</Button>
                <Button type="danger" size="mini" plain>按钮</Button>
                <Button type="warning" size="mini" plain>按钮</Button>
                <hr/>
                <Checkbox value={valueCheckbox} label="选项1" name="name1" disabled color="#f00" onChange={changeCheckBoxValue}/>
                <Checkbox value={valueCheckbox} label="选项1" checked color="#f00" onChange={changeCheckBoxValue}/>
                <hr/>
                <Radio value={1} label="选项1" checked name="name1" disabled color="#f00" onChange={changeRadioValue}/>
                <Radio value={2} label="选项2" name="name1" disabled color="#f00" onChange={changeRadioValue}/>
                <Radio value={3} label="选项3" name="name1" disabled color="#f00" onChange={changeRadioValue}/>
            </Container>
            <hr/>
            <FormLabel>姓名</FormLabel>
            <Input value={3} onChange={inputChange} size="large" placeholder="请输入姓名"/>
            <Spacing/>
            <FormLabel>姓名</FormLabel>
            <Input value={3} onChange={inputChange} placeholder="请输入姓名"/>
            <Spacing/>
            <FormLabel>姓名</FormLabel>
            <Input value={3} onChange={inputChange} size="small" placeholder="请输入姓名"/>
            <Spacing height="50px"/>
            <FormLabel>姓名</FormLabel>
            <Input value={3} onChange={inputChange} size="mini" placeholder="请输入姓名"/>
        </Container>
    );
}

export default App;